<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{template.eventName}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	
	<!--Author: Menna Khaled
	This block conatins the jquery validations related to:
		creating a list : To ensure that the List has a title
		adding a Task: To ensure the added task has a description
-->
	<script type="text/javascript">
	
	$(document).ready(function(){
	$('#createList').validate();
	$('#addTask').validate();


	});
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The following code validates the search engine fields (search by and textbox so as for the user not to enter empty fields-->

	$(document).ready(function(){
	$('#searchEngineForm').validate();
	});
	
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The next code is a function that works when the search method is used, when the user types something in the third field this function calls the method autoCompleteSearch which in return retrieves data from the database and shows it in the form of real-time data in the box of the search box -->



	$(document).ready(function(){
	     $( "input#autocompleteSearch" ).autocomplete({
	                            source: "{% url autoCompleteSearch %}",
	                            minLength: 1,
	                            autoFocus: true
	        });
	});

	</script>
	
	<!--  Author : Aya Raafat
This function is for enabling the animation for showing and hiding the part for
uploading when clicking on the upload more photos button -->
<script type="text/javascript">

function uploadPhoto(){

	    if(document.getElementById("photo").style.display == "none"){
		    $('#photo').show(1000);	
	    }
	    else{
		    $('#photo').hide(1000);	
	    }
	
    }
</script>

<!--  Author : Noreen Fadel This script makes sure that a user actually entered a title for the video name -->
<script type="text/javascript">
  $(document).ready(function(){
    $("#videoName").validate();});
</script>
<!--  Author : Noreen Fadel This function enables the showing and hiding for uploading any video when button for upload more videos is clicked -->

<script type="text/javascript">

function video(){
	if(document.getElementById("video").style.display == "none"){
		$('#video').show(1000);	
	}
	else{
		$('#video').hide(1000);	
	}

	
}
</script>
	
<!-- Author: Reem Tarek
		This javascript block conatins some functions that are used to keep track of users selections and actions:
			function toggleChk(id) : This methods keeps track of all the checkboxes the user selects by adding them to an array 
			function checkAll(): This method checks all the items in the Table representing the List so as to allow the user to perform a certain action4
			function uncheckAll(): This method unchecks all the items in the Table representing the List so as to allow the user to perform a certain action
			
--> 
	<script type="text/javascript">
	var ids = new Array();
	var counter = ${{items.count}}

	function toggleChk(id) {
		if(ids.indexOf(id) == -1){
			ids.push(id);
			}
			else{
			var i = ids.indexOf(id);
			ids.splice(i,1);
			}
	}

	function checkAll(){

		if (counter = 1){
			var field = document.Edit.task;
			field.checked = true;
			ids.push(field.id);
		}
		var field = document.Edit.task;
		for(i = 0; i<field.length; i++){
			field[i].checked = true;
			ids.push(field[i].id);
		}

	}

	function uncheckAll(){
		if (counter = 1){
			var field = document.Edit.task;
			field.checked = false;
			ids.pop(field.id);
		}
		var field = document.Edit.task;
		for(i = 0; i<field.length; i++){
			field[i].checked = false;
			ids.pop(field[i].id);
		}
	}


	
	// Author: Ahmed Hashad 
	// This javascript block conatins some functions that are used to keep track of users actions: 
	//  completeCheck() : This method is called when the event creator wishes to complete an item. If there were no items selected then the user will be informed that they have to select an item to complete, Else the item selected will be completed by calling the method completeTask
	  
	function completeCheck(){
		if (ids.length == 0 ){
			$('#assign').hide(1000);
			$('#delete').hide(1000);
			$('#moderate').hide(1000);
			$('#complete').show(1000);
			return false;

		}
		else{
			ids = new Array();
			document.Edit.action = '/CompleteTask/'; 
			return true;
		}
		
	}
	
	

	// Author: Mayada Al-Sawah 
	// This function is used to display an alert to the users who click on any 
	//remove button in order to validate their wish to delete this component from their 
	// event page.

	function checkRemove(){
	      var r = confirm ("Are you sure you want to remove?");
	 		if (r == false)
	 		{
	 		return false;
	 		}
	 }
	</script>
	
	<!-- Author: Hadeel Mohamed
	This part of code is in javaScript and it does the following functionality, the method toggleVisibility
	Checks the Id of the element if its equal to the the "Hypertext Reference" clicked Id it shows that component 
	and it hides all the other ones and that part is mainly meant for example if Creator clicked on a specific 
	component to show it while there is another one is already shown the first 
	one will get hidden and the last clicked will replace it and thats applies to all the other 
	toggleVisibilities methods in the file-->  
<script type="text/javascript">
	  function toggleVisibility(){
		    if(document.getElementById("basic").style.display == "none" ) {
		    
		            document.getElementById("basic").style.display='block';
		            document.getElementById("loc").style.display='none';
		            document.getElementById("med").style.display='none';
		            document.getElementById("pay").style.display='none';
		            document.getElementById("agenda").style.display='none';
		            document.getElementById("liveS").style.display='none';
		            document.getElementById("sm").style.display='none';
		            
		        }
		    else  {
		                document.getElementById("basic").style.display='none';
		    
		          }
		        }
	  </script>
	  <script type="text/javascript">
     function toggleVisibility1(){
    if(document.getElementById("loc").style.display == "none" ) {
    
            document.getElementById("loc").style.display='block';
            document.getElementById("basic").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("loc").style.display='none';
    
          }
        }
		
	
    
    </script>
    
	    
	      <script type="text/javascript">
     function toggleVisibility2(){
    if(document.getElementById("med").style.display == "none" ) {
    

            document.getElementById("med").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("med").style.display='none';
    
          }
        }
    </script>
    

	   <script type="text/javascript">
     function toggleVisibility3(){
    if(document.getElementById("agenda").style.display == "none" ) {
    
            document.getElementById("agenda").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("agenda").style.display='none';
    
          }
        }
    </script>
    

	      <script type="text/javascript">
         function toggleVisibility4(){
        if(document.getElementById("pay").style.display == "none" ) {
    
            document.getElementById("pay").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("pay").style.display='none';
    
          }
        }
    </script>

	     <script type="text/javascript">
     function toggleVisibility5(){
    if(document.getElementById("liveS").style.display == "none" ) {
    
            document.getElementById("liveS").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("sm").style.display='none'; 
        }
        
    else  {
                document.getElementById("liveS").style.display='none';
    
          }
        }
    </script>
    
	     <script type="text/javascript">
     function toggleVisibility6(){
    if(document.getElementById("sm").style.display == "none" ) {
    
            document.getElementById("sm").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("basic").style.display='none';
            
        
        }
    else  {
                document.getElementById("sm").style.display='none';
    
          }
        }
    </script>
	
  </head>

  <body>

   <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <ul class="nav">

          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->
         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
<h2><font color="BLUE"><p>{{inviter}}</p></font></h2>   
<h2><font color="GREEN"><p>{{attendingEventResponse}}</p></font></h2>
<h2><font color="GREEN"><p>{{maybeAttendingEventResponse}}</p></font></h2>
<h2><font color="GREEN"><p>{{notAttendingEventResponse}}</p></font></h2>
<h2><font color="RED"><p>{{notAuthorizedToRespond}}</p></font></h2>


      <div class="row-fluid">
        
        <div class="span8">
	
			<!-- Author: Dalia Hosny C5-07 -->
<!-- this code displays the search engine form in the Dash board home -->

<h2>Search your events here:</h2>
   <form id = "searchEngineForm" action="/searchEngine/" method="POST">
   {%csrf_token%}
    <select id = "drop-down-list" name="Categories" class="required">
    <option value="" selected="selected">Search by...</option>
      <option value="Name">Name</option>
      <option  value="Location">Location</option>
      <option  value="Tag">Tag</option>
      <option  value="Category">Category</option>
    </select>
    <input id = "autocompleteSearch" type="text" size="60" name="search" class="required" minlength="1">
    <input type="submit" value="Search now!" ><br>
    </form>
				<form action="/bookmark/" method = "POST">
					<br><input type="submit" value="Bookmarks"><br>	
					</form>
					
          <div class="hero-unit">
	
          	 <p> {{ alreadyAssigned}} </p>
			      <p> <font color = 'GREEN'> {{successAssigned}} </font></p>

 <!-- Author: Hadeel Mohamed
 The following code calls the method toggleVisiblity for each component in a form of 
 a "Hypertext Reference" which opens a box of the required information upon clicking on it-->
 
			   <a href="#" onclick="toggleVisibility('');">Basic Information</a>
&nbsp; &nbsp; &nbsp; 
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Location"%}
   <a href="#" onclick="toggleVisibility1('');">Location</a>
    {%endif%}
    {%endfor%}
&nbsp;&nbsp; 
{% for i in currentComponents%}
    {% if i|stringformat:"s" == "Media"%}
    <a href="#" onclick="toggleVisibility2('');">Media</a>
    {% endif %}
    {% endfor %}
&nbsp;&nbsp; 
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Agenda"%}
   <a href="#" onclick="toggleVisibility3('');">Agenda</a>
    {% endif %}
    {% endfor %}
&nbsp;
 {% for i in currentComponents%}
   {% if i|stringformat:"s" == "Payment"%}
   <a href="#" onclick="toggleVisibility4('');">Payment</a>
   {%endif%}
   {%endfor%}
&nbsp;
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Live Stream"%}
   <a href="#" onclick="toggleVisibility5('');">LiveStream</a>
    {% endif %}
    {% endfor %}
&nbsp;
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Social Marketing"%}
   <a href="#" onclick="toggleVisibility6('');">SocialMarketing</a>
   {% endif %}
   {% endfor %}
			   <br>
			   <br>
			   <!-- Author: Hadeel Mohamed
This code  puts all the basic information of any event in a box this box is initially hidden as well as
it appears in the center and the code also checks the type of 
the template if its one of the following ( Wedding, Birthday, Concert, Charity or Engagement ) it adds the 
suitable information that a creator of an event would like to add 
and there is also if conditions  to check if these optional fields are empty it would not add them to the chosen template
 -->
			 <div id="basic"  style = "display:none" align="left">
				 <h2> Event name: {{template.eventName}}</h2><br />
				  <h3> Start date: {{template.startDate}}</h3><br />
			      <h3> End date: {{template.endDate}}</h3><br />
			      <h3> Start time: {{template.startTime}}</h3><br />
			      <h3> End time: {{template.endTime}}</h3><br />

			       {% if template.name == "Create your own template" %}
			      <h3> Description </h3>
				  <pre>
			      {{event.template.description}}
				  </pre>

			      {% endif %}

			      {% if template.name == "Wedding" %}
			      {% if template.brideName == " " %}

			      {% else%}
			       <h3> Bride name is: {{template.brideName}}</h3><br />
			        {% endif %}
			      {% if template.groomName == "   " %}

			       {% else%}
			       <h3> Groom name is: {{template.groomName}}</h3><br />

			        {% endif %}
			        {% endif %}

			       {% if template.name == "Birthday" %}
			       {% if template.birthdayOwner == "   "%}

			       {% else%}
			       <h3> Birthday owner is: {{template.birthdayOwner}}</h3><br />
			       {% endif %}
			        {% endif %}

			       {% if template.name == "Concert" %}
			       {% if template.singerName == "   "%}
			       {% else%}
			       <h3> Singer name is: {{template.singerName}}</h3><br />
			       {% endif %}
			       {% endif %}

			       {% if template.name == "Charity" %}
			       {% if template.charityType == "   " %}
			       {%else%}   
			       <h3> Charity type is: {{template.charityType}}</h3><br />
			        {% endif %}
			        {% endif %}

			        {% if template.name == "Engagement" %}
			         {% if template.brideName == " " %}

			      {% else%}
			       <h3> Bride name is: {{template.brideName}}</h3><br />
			        {% endif %}
			      {% if template.groomName == "   " %}

			       {% else%}
			       <h3> Groom name is: {{template.groomName}}</h3><br />

			        {% endif %}
			        {% endif %}
			

<!-- Author: Hadeel Mohamed
This code adds an edit button to edit basic information and it calls the method viewEditBasicInformation 
on clicking it -->
     
      <form action="/viewEditBasicInformation/"method="POST">
      {% csrf_token %}
     <input type = "submit" name="Edit basic information" value = "Edit basic information"/><br />
       <br>
      </form>
			     </div>
			     
<!-- Author: Hadeel Mohamed
This code also makes a box for the location attributes like I have declared before how it works 
but here as well as the other components I check if the Creator chose Location component I display it else I do not 
show even the name Location and the same goes for the rest of other components-->

			     <!-- location --> 
			       <div id="loc"  style = "display:none" align="left">
			        {% for i in currentComponents%}
      {% if i|stringformat:"s" == "Location"%}
     <h3> Location name  : {{location.name}}</h3>
      <h3> Block Number : {{location.BlockNumber}}</h3>
      <h3> Street : {{location.Street}}</h3>
      <h3> City : {{location.city}}</h3>
      <h3> Country : {{location.Country}}</h3><br />
	
      
      <img src="http://maps.googleapis.com/maps/api/staticmap?center={{location.BlockNumber}}+{{location.Street}}+street,
{{location.city}},{{location.Country}}&zoom=16&size=512x512&maptype=roadmap&markers=color:red%7Ccolor:red%7Clabel:C%7C{{location.BlockNumber}}
+{{location.Street}}+street,{{location.city}},{{location.Country}}&sensor=false" />
          
          <!-- Author: Ola Magdy
          This form conatins edit location button that invokes viewEditLocation method that redirects him to the edit location html page
          -->
      <form action="/viewEditLocation/"method="POST">
      {% csrf_token %}
      <input type = "submit" name="Edit Location" value = "Edit Location"/>
        </form>

         <!-- Author: Mayada Al-Sawah
          This form conatins remove location button that invokes removeLocation method that 
		  redirects to the same page.
          -->
    	<form action="/removedLocation/" method="POST">
	 <input type="submit" name= 'name' value="Remove Location" onclick= "checkRemove();"/>
	</form>
 <br>
      {% endif %}
      {% endfor %}
       <br>
			     </div>
			     
			 <!-- media -->
			      <div id="med"  style = "display:none" align="left">

					    {% for i in currentComponents%}
					      {% if i|stringformat:"s" == "Media"%}
					        <h3> Media : <h3><br />
						  <!--  Author : Aya Raafat
					      This link is for viewing the photos uploaded by the user -->
					      <a href = "/viewPhotos/"> Photos</a><br />
						  <!--  Author : Noreen Fadel This link views user uploaded videos -->
						  <a href = "/viewVideos/"> Videos</a><br />
						  <!--  Author : Aya Raafat
					      This button is giving the option for the user to upload more photos -->
						  <button type="submit" value="submit" onclick="uploadPhoto();">Upload More Photos</button>
						  <!--  Author : Noreen Fadel This button allows for users to upload more videos -->
					      <button type="submit" value="submit" onclick="video();">Upload More Videos</button><br />
						  <!--  Author : Aya Raafat
					      This form is for enabling the user to upload More photos for each event by browsig the desird photos and 
					      then click on button upload to save them and view them in photos.html  -->
						   <form enctype="multipart/form-data" action="/uploadMorePhotos/" method="POST"  id = "photo" style = "display: none">
					        {% csrf_token %}
					            <table>
					                {{photoForm}}
					            </table>
							<button type="submit" value="submit" >Upload</button>		
						   </form>

						    <!--  Author : Noreen Fadel This form allows for users to upload more videos for any event through uploading the desired video which is automatically saved and then they can view them -->

					     <form  enctype="multipart/form-data" action = "/uploadMoreVideos/" method = "POST" id = "video" style = "display: none">

					          <p> Video Title:<input type= "text" id="videoName" name="videoName" class ="required"></input> </p>

					        	<table> {{videoForm}} </table>

						<button type="submit" value="submit" >Upload</button>
						</form>
						   <!-- Author: Mayada Al-Sawah
					          This form conatins remove media button that invokes removeMedia method that 
							  redirects to the same page.
					          -->
					      	 <form action="/removedMedia/" method="POST">
						 {% csrf_token %}
						 <input type="submit" name= 'name' value="Remove Media" onclick= "checkRemove();" />
						 <br>
							</form>
					      {% endif %}
					      {% endfor %}
			       <br>

			     </div>

			  <!--  agenda  -->

			      <div id="agenda"  style = "display:none" align="left">
					      {% for i in currentComponents%}
					      {% if i|stringformat:"s" == "Agenda"%}
					       <h3> Planned activities : {{template.agenda.title }}</h3><br />
					<!-- Author: Reem Tarek
							This block conatins a table that displays all the activities the user had added to the event's agenda 
					--> 
					        <TABLE id="dataTable" width="350px" border="1">
					      	<tr>
								<th> Time</th>
								<th> Description</th>
							</tr>
							{% for A in activities %}
							<tr>

							<TD> <OUTPUT type = "time" name = "time" /> {{ A.startTime }} - {{  A.endTime }} </TD>
							<TD>  <OUTPUT type = "text" /> {{ A.description }} </TD>

							</tr>
							{% endfor %}
					    </TABLE>

					           <!-- Author: Ola Magdy
					          This form conatins edit agenda button that invokes viewEditAgenda method that redirects him to the edit agenda html page
					          -->
					       	<form action="/viewEditAgenda/"method="POST">
						      {% csrf_token %}
						      <input type = "submit" name="Edit Agenda" value = "Edit Agenda"/>
						 		</form>
							<!-- Author: Mayada Al-Sawah
					          This form conatins remove agenda button that invokes removeAgenda method that 
							  redirects to the same page.
					          -->
					     	<form action="/removedAgenda/" method="POST">
						 {% csrf_token %}
						 <input type="submit" name= 'name' value="Remove Agenda" onclick= "checkRemove();" />
						 <br>
						        <br>
						      </form>
					      {% endif %}
					      {% endfor %}

	   

			     </div>

			   <!-- payment -->

			      <div id="pay"  style = "display:none" align="left">
			      	 {% for i in currentComponents%}
					  {% if i|stringformat:"s" == "Payment"%}
					  <h3> Payment amount : {{template.payment.paymentAmount}}</h3><br />
					  <h3> Payment deadline : {{template.payment.deadline}}</h3><br />
					  <form action="/CurrentCredit/" method="POST">
						<h3>your current credit:</h3>
						{% if credit %}
						<h3>{{ credit }} L.E</h3>
				    		{% else %}
				       		 Sorry no one has paid for the event yet 
				    	{% endif %}
				    	    <!-- Author: Ola Magdy
				          This form conatins edit payment button that invokes viewEditPayment method that redirects him to the edit payment html page
				          -->
						</form>
						<form action="/viewEditPayment/"method="POST">
						{% csrf_token %}
						<input type = "submit" name="Edit Payment" value = "Edit Payment" onclick=edit.action='/EditPayment/'; return true ;">
						 </form>
						 <!-- Author: Mayada Al-Sawah
				          This form conatins remove Payment button that invokes removePayment method that 
						  redirects to the same page.
				          -->

						 <form action="/removedPayment/" method="POST">
				  {% csrf_token %}
				  <input type= "submit" name= "name" value= "Remove Payment" onclick= "checkRemove();" />
				  <br>
				 </form>
						{% endif %}
						{% endfor %}
						<br>
					<br>
			        </div>

			      <!--  Livestream  -->

				  <div id="liveS"  style = "display:none" align="left">
				   	{% for i in currentComponents%}
					  {% if i|stringformat:"s" == "Live Stream"%}
				      <h3> LiveStream : {{event.template.liveStream.channel}}</h3><br />

					<!--  Author : Hana Saoud 
							The link is for viewing the channel and the iframe inside oembed tags is for embedding ustream.tv channel-->


					            <a href = "/viewChannel/"> View Channel</a>  <br />

				       <iframe src="{{ event.template.liveStream.channel  }}" width="608" height="368" scrolling="no"></iframe> 
						    <!-- Author: Ola Magdy
				          This form conatins edit livestream button that invokes viewEditLiveStream method that redirects him to the edit live stream html page
				          -->
						 <form action="/viewEditLiveStream/"method="POST">
						{% csrf_token %}
						{% for i in currentComponents%}
					    {% if i|stringformat:"s" == "Live Stream"%}
						<input type = "submit" name="Edit Livestream" value = "Edit Livestream" onclick=edit.action='/EditLiveStream/'; return true ;">
						{% endif %}
						{% endfor %}
						<br>
						<!-- Author: Mayada Al-Sawah
				          This form conatins remove live stream button that invokes removeLiveStream method that 
						  redirects to the same page.
				          -->
						</form>
				       	<form action="/removedLiveStream/" method="POST">
					  {% csrf_token %}
					  <input type="submit" name= 'name' value="Remove Live Stream" onclick= "checkRemove();" />
					  <br>
					  </form>
					   {% endif %}
					   {% endfor %}
						<br>
						
		<br>
			     </div>

			  <!--  Social Marketing -->

				  <div id="sm"  style = "display:none" align="left">
						    {% for i in currentComponents%}
					      {% if i|stringformat:"s" == "Social Marketing"%}
					          {% if template.socialMarketing.twitterUserName %}
					      	<h3> Twitter : {{template.socialMarketing.twitterUserName}}</h3><br />
					      	   {% endif %}
					      	 {% if template.socialMarketing.facebookUrl %}
					      <h3> Facebook : {{template.socialMarketing.facebookUrl}}</h3><br />
					           {% endif %}
					         {% if template.socialMarketing.hashTag %}
					      <h3> HashTag: {{template.socialMarketing.hashTag}}</h3><br />

					<!--  Author: Nermeen Hashem
					the following code loads Tweet button that specifies a hashtag within the text and the button.
					this hashTag is the one entered by the event Creator . By using the new class, twitter-hashtag-button,
					both within the button itself and in the text of the tweet status, the hashtag specified by 
					the event Creator will appear and when the Event Creator presses on the this button a window will
					be opened requesting a text to be tweeted by the hashtag to his twitter account. -->

					<a href="https://twitter.com/intent/tweet?button_hashtag={{template.socialMarketing.hashTag}}" class="twitter-hashtag-button" data-lang="en" data-related="jasoncosta" data-size="large">Tweet #{{template.socialMarketing.hashTag}}</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
					          {%endif%}

					<!-- Author: Nermeen Hashem
					the following code loads tweet this button. when the event Creator presses on the this
					button a window will be opened requesting a text to be tweeted to his twitter account.
					The size of the button can render in either "medium", which is the default size,
					or in "large" - which is the larger button.-->

					 <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-count="none">Tweet</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

							    <!-- Author: Ola Magdy
					          This form conatins edit social marketing button that invokes viewEditSocialMarketing method that redirects him to the edit social marketing html page
					          -->
					        <form action="/viewEditSocialMarketing/"method="POST">
					      {% csrf_token %}
					      <input type = "submit" name="Edit Social Marketing" value = "Edit Social Marketing"/>
					        </form>
							<!-- Author: Mayada Al-Sawah
					          This form conatins remove social marketing button that invokes removeSocialMarketing method that 
							  redirects to the same page.
					          -->
					       	<form action="/removedSocialMarketing/" method="POST">
						  		{% csrf_token %}
						  		<input type="submit" name= 'name' value="Remove Social Marketing" onclick= "checkRemove();" />
					      
					       <br>
					      </form>
						{% endif %}
					      {% endfor %}
			     </div>

			      <br>
		
          </div>
          </div>
        
          <div class="span4">
          
              	<h1> 
					 {{ list.title }} To-Do List		
				</h1>
		<!-- Author: Menna Khaled
				This block conatins the code that displays the tasks assigned to the moderator.
		--> 
		  <form id = "Edit" name="Edit" action="/DeleteTask/" method="POST">
		    <TABLE id="Table"  name = "table " width="350px" border="1">
		        <tr>
		            <th>  Tasks  </th>
				</tr>
				 {% for I in items %}

					{% if I.completed %}
					<tr>
						<TD> <INPUT type="checkbox"  id = "{{ I.id }}" name="task"  value =  "{{ I.id }}"  onclick = "toggleChk('{{I.id}}')" > <strike>{{ I.title }}</strike></TD>
						    </tr>

					{% else %}
		           				<tr>

		           		<TD> <INPUT type="checkbox" id = "{{ I.id }}" name="task"  value =  "{{ I.id }}"  onclick = "toggleChk('{{I.id}}')" >{{ I.title }}</TD>
		           		   </tr>

					{% endif %}   
		         {% endfor%}
				  <!-- Author: Ahmed Hashad 
		This block contains the submit button that allows the user to complete a task. 
-->
		             <INPUT type="submit" name = "complete" value="Complete Task " onclick = "Edit.action = '/CompleteTask/'; check('Edit'); return true;" />
		        <div id="complete" style="display:none;"> <font color = "RED" >You haven't checked any tasks to be completed</font></div>


			
				
        </TABLE>
        </form>
          
        </div><!--/span-->
        </div><!--/row-->
        
        
          <div class="row-fluid">
            <div class="span2">
            
          <!-- Author: Amina Kadry this form is used for the user to send an invitation for his event to other users-->       
<form action="/sendInvitation/" method="POST">
  <!--  <button type ="submit" value = "submit" >Send Invitation</button>-->
  <a href="http://localhost:8000/sendInvitation">Send invitation</a> 
  
  </form>
<!-- Author: Amina Kadry this form is used for the user to choose that he is attending the event-->  
  <form name = "input" action = "/joinEvent/" method = "POST">
<button type="submit" value="submit" >Attending</button>
</form>
<!-- Author: Amina Kadry this form is used for the user to choose that he is maybe attending the event-->  
  <form name = "input" action = "/maybeAttend/" method = "POST">
<button type ="submit" value = "submit">Maybe Attending</button>
</form>

<!-- Author: Amina Kadry this form is used for the user to choose that he is not attending the event-->
<form name = "input" action = "/notAttend/" method = "POST">
<button type ="submit" value = "submit">Not Attending</button>
</form>

			<a href="/eventEdit/{{event.id}}/">Edit Event</a>
			
			
            </div><!--/span-->
            <div class="span2">
            <h2>Pages and Menus</h2>
              	<!--  Author : Inas Khodeir
this form enables the user to go to the page that enables the user to add page or menu-->
<form action ="/EventsPage/" method = "POST"> 
<button type = "submit" value = "submit" > Add Pages and Menus </button>
</form> 
<h3> Pages: </h3>
{% for gb in page %}
	<u><a href = "/ViewCMSPage/{{gb.id}}">{{ gb.title }}</a></u></br>
{% endfor %}

<h3>Menus:</h3>
{% for l in links%}
<u><a href = "/viewMenus/{{l.id}}">{{ l.menu.title }}</a></u></br>
{% endfor %}

            </div><!--/span-->
            <div class="span2">
            <h2> Event Statistics</h2>
             	<!-- Author: Ahmed Hashad
		This block conatins a table that displays the statistics related to the event's attendings. As it displays the number of:
			Attendees
			Maybe Attending
			Not Attending
			Paid Attendees
			Unique visitors to the event page
			Total visitors to the event page
-->
        
        <table border="2">
            <tr>{% if attending %}
                <th>Number of Attendees:</th> <td>{{ attending }}</td> 
                {% else %}
                <th>Number of Attendees:</th> <td> 0 </td> 
                {% endif %}
                <th> <a href = "/allAttend/" > See All</a>
                </th>
            </tr>
            
            <tr>{% if maybeAttending %}
                <th>	Number of Maybe Attending:</th> <td> {{ maybeAttending }} </td>
                {% else %}
                <th>	Number of Maybe Attending:</th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allMaybe/"> See All </a>
                </th>
            </tr>
            
            
            <tr>{% if notAttending %}
                <th>	Number of Not Attending:</th> <td> {{ notAttending }} </td> 
                {% else %}
                <th>	Number of Not Attending:</th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allNotAttending/" >See All</a>
                </th>
            </tr>
            
            <tr>{% if payedAttendees %}
                <th>	Number of payed Attendees:</th> <td> {{ payedAttendees }} </td> 
                {% else %}
                <th>	Number of payed Attendees: </th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allPayedAttendees/">See All</a>
                </th>
            </tr>
            
            <tr> <th> Number of Viewes: </th> <td> {{pageCounter}} </td> </tr>
            <tr><th> Number of Unique Visits: </th><td> {{viewerCount}}</td></tr>
        </table>
            </div><!--/span-->
         
          
            <div class="span2">
              <br>
              <br>
              <br>
              
				<!-- Author: Dalia Hegazy 
		the following form has two buttons:-
		1) Share Button : which is used by the creator to share this event
		2) Like Button : which is used by the creator to like this event and to unlike it if he is already liked it before
		
		after the form the number of likes and shares is printed to the creator 
 -->
<form name="social_form" method="post">{% csrf_token %}
   <input type="submit" value="Share Event" onclick="social_form.action='/EventPage/{{event.id}}/share/'; return true" />
   </br>
   {% if oldLike.count = 0 %}
   <input type="submit" value="Like Event" onclick="social_form.action='/EventPage/{{event.id}}/like/{{user.id}}/'; return true" />
   {% else %}
   <input type="submit" value="UnLike Event" onclick="social_form.action='/EventPage/{{event.id}}/like/{{user.id}}/'; return true" />
   {% endif %}
</form>
{{numberOfLikes}} Likes </br>
{{shareNumber}} Shares
<br/>

<!--- Author: Dalia Hegazy
		there are two links to two different pages
		First Link: is used by the creator to go to the attendee chart page
		Second Link: is used by the creator to go to the like chart page
-->
<a href="/chartAttendee/{{event.id}}">View Attendee Chart</a>
<br/>
<a href="/chartLike/{{event.id}}">View Likes Chart</a>
  
      <a href="/SuggestComponent/">Suggest Component</a>

            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
     

      <hr>

      <footer>
     
		<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
